<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02DOM练习</title>
</head>
<body>
<h1>我是标题：<span class="s"></span></h1>
<button onclick="f1()">按钮</button>
<hr>
<input type="text" id="i1">
<input type="text" id="i2">
<button onclick="f2()">按钮2</button>
<script>
    function f1(){
        //根据类选择器找到span元素
        let span=document.querySelector('.s');
        console.log(span);
        //设置span元素内的显示内容
        // span.innerHTML="我是span"
        // span.innerHTML='我是<mark>span</mark>';
        span.innerHTML='<table><tr><td></td><td></td></tr></table>'
    }

    function f2(){
        let i1=document.querySelector('#i1');//根据id选择器获取元素
        let i2=document.getElementById('i2');//根据id值获取元素
        console.log(i1.value);
        console.log(typeof i2.value);//获取输入框的值，默认都是String类型
        let input1=parseFloat(i1.value);
        let input2=parseFloat(i2.value);//转换为数字类型
        console.log(input1+input2)
    }
</script>
</body>
</html>